<template>
	<view class="content">
		<view class="order_one">
			<view class="order_one_left" v-for="item in goosList" :key='item.id'>
				<image :src="item.goods_image" mode=""></image>
				<view class="order_one_text">
					<view class="order_ones">
						<text>{{item.goods_name}}</text>
						<text class="price">￥{{item.price}}</text>
					</view>
					<view class="order_ones">
						<text class="gg">{{item.ertitle}}</text>
						<text class="gg">X{{item.num}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="order_one_left">
				<image src="../../../static/images/a7.png" mode=""></image>
				<view class="order_one_text">
					<view class="order_ones">
						<text>马来西亚猫山王榴莲1个装</text>
						<text class="price">￥269</text>
					</view>
					<view class="order_ones">
						<text class="gg">规格：1.8-2.2kg（液氮冷冻）</text>
						<text class="gg">X2</text>
					</view>
				</view>
			</view> -->
			<view class="order_one_item">
			<!-- 	<view class="order_one_yf">
					<text>运费</text>
					<text class="gg">￥0.00</text>
				</view> -->
				<view class="order_one_yf">
					<text>备注</text>
					<text class="gg">{{info.buyer_message}}</text>
				</view>
			</view>
			<view class="order_one_sh">
				<view class="order_sh">
					<!-- <text>待支付</text> -->
					<!-- <text>退款</text> -->
				</view>
				<view class="order_qrs">
					<text></text>
					<text class="zj"><text class="hj">合计</text>￥{{info.order_money}}</text>
				</view>
			</view>
			<view class="sale_tk">
				<text v-if="info.order_status===5">售后中</text>
			</view>
		</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goosList:[],
				info:{},
				'id':0,
			};
		},
		onLoad(options) {
			this.id=options.oid;
			this.Detailinfo()
		},
		methods:{
			Detailinfo(){
				this.$ajax(
				this.apiList.orderdetail,
				{
					oid:this.id
				},'POST'
				).then(res=>{
					this.info = res.data
					this.goosList = res.data.goods
						// console.log(this.info )
				})
			},
		}
	}
</script>

<style lang="scss">
	.content{
		background: #F5F5F5;
		height: 100vh;
		.order_one {
			margin: 20rpx;
			background: #fff;
			border-radius: 15rpx;
			.order_one_left {
				display: flex;
				padding: 20rpx;
				image {
					width: 128rpx;
					height: 128rpx;
				}
				.order_one_text {
					width: 80%;
					font-size: 24rpx;
					color: #212121;
					font-weight: 400;
					font-family: PingFang SC;
					text {
						display: block;
					}
					.order_ones {
						display: flex;
						justify-content: space-between;
						width: 100%;
						padding-bottom: 20rpx;
					}
					.price {
						color: red;
					}
					.gg {
						color: #BDBDBD;
						font-size: 20rpx;
					}
				}
			}
		
			.order_one_yf {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 20rpx 10rpx 20rpx;
				text {
					font-size: 20rpx;
				}
				.gg {
					color: #BDBDBD;
				}
			}
			.order_one_sh {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 20rpx 10rpx 20rpx;
		
				.order_sh {
					text {
						color: #FCBB21;
						font-size: 24rpx;
						border: 1px solid #FCBB21;
						padding: 5rpx 20rpx;
						border-radius: 20rpx;
						margin-right: 20rpx;
					}
				}
				.order_qrs {
					text {
						color: #BDBDBD;
					}
		
					.zj {
						padding-left: 10rpx;
						font-size: 28rpx;
						color: red;
		
						.hj {
							font-size: 28rpx;
							color: #212121;
						}
					}
				}
				text {
					font-size: 24rpx;
				}
			}
			.sale_tk{
				display: flex;
				justify-content: flex-end;
				padding: 20rpx;
				
				text{
					font-size: 28rpx;
					color: #FFFFFF;
					background: #8BDD8E;
					width: 150rpx;
					height: 64rpx;
					text-align: center;
					line-height: 64rpx;
					border-radius: 10rpx;
				}
			}
		}
			
	}
</style>
